<template>
  <div class="appointment-container">
    <el-card v-for="item in appointmentList.records" :key="item.appointId" class="appointment-card">
      <div class="card-header">
        <span>预约时间：{{ item.appointTime }}</span>
        <el-tag :type="statusMap[item.status].type">
          {{ statusMap[item.status].text }}
        </el-tag>
      </div>

      <div class="card-content">
        <p>患者：{{ item.userRealName }}</p>
        <p>医生：{{ item.doctorRealName }}</p>
        <p>创建时间：{{ item.createTime }}</p>
      </div>

      <div v-if="getUser().userInfo.type === 1" class="card-actions">
        <el-button
            v-if="item.status === 0"
            type="success"
            @click="handleAccept(item.id)"
        >接受预约
        </el-button>
        <el-button
            v-if="item.status === 0"
            type="danger"
            @click="handleReject(item.id)"
        >驳回预约
        </el-button>
      </div>
    </el-card>

    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="appointmentList.total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
    />
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getUser} from '@/store/userStore'
import {getAppointmentDoctorList, getAppointmentList, updateAppointmentStatus} from '@/api/appointment.js'
import {faker} from '@faker-js/faker'

const router = useRouter()
const appointmentList = ref({records: [], total: 0})
const currentPage = ref(1)
const pageSize = ref(10)

const statusMap = {
  0: {type: 'info', text: '待处理'},
  1: {type: 'success', text: '已接受'},
  2: {type: 'danger', text: '已驳回'}
}

const fetchData = async () => {

  try {
    if (getUser().userInfo.type !== 1) {
      const params = {
        page: currentPage.value,
        size: pageSize.value,
        phone: getUser().userInfo.phone
      }
      const res = await getAppointmentList(params)
      appointmentList.value.records = res.data.records
      appointmentList.value.total = res.data.total
    } else {
      const params = {
        page: currentPage.value,
        size: pageSize.value,
        doctorId: getUser().userInfo.id
      }
      const res = await getAppointmentDoctorList(params)
      appointmentList.value.records = res.data.records
      appointmentList.value.total = res.data.total
    }


  } catch (error) {
    ElMessage.error('获取预约列表失败')
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
  fetchData()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  fetchData()
}

const handleAccept = async (id) => {
  await ElMessageBox.confirm('确定接受该预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })

  try {
    await updateAppointmentStatus({appointId: id, status: 1})
    ElMessage.success('操作成功')
    await fetchData()
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const handleReject = async (id) => {
  await ElMessageBox.confirm('确定驳回该预约吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })

  try {
    await updateAppointmentStatus({appointId: id, status: 2})
    ElMessage.success('操作成功')
    await fetchData()
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style lang="scss" scoped>
.appointment-container {
  padding: 20px;

  .appointment-card {
    margin-bottom: 20px;
    transition: box-shadow 0.3s;

    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .card-content p {
      margin: 8px 0;
      color: #666;
    }

    .card-actions {
      margin-top: 15px;
      text-align: right;
    }
  }

  .el-pagination {
    margin-top: 20px;
    justify-content: center;
  }
}
</style>
